<template>
	<div class="label">
		<el-popover trigger="click" :teleported="false" placement="top">
			<template #reference>
				<img :src="getImgUrl(data.img)" class="img" @click.stop="clickFn" />
			</template>
			<div class="msg">
				<div class="name">{{ data.title }}</div>
				<div class="flex m-between m-t-10">
					<span class="val">{{ data.name }}</span>
					<span class="unit">{{ data.val }}{{ data.unit }}</span>
				</div>
			</div>
		</el-popover>
	</div>
</template>

<script setup name="labelDemo">
const props = defineProps({
	data: {},
	callBack: Function
})

// 点击事件
function clickFn() {
	props.callBack?.apply()
}
</script>

<style lang="scss" scoped>
.label {
	pointer-events: auto;
	cursor: pointer;
	.img {
		width: 25px;
		cursor: pointer;
	}
	.msg {
		font-size: 12px;
		z-index: 100;
		.name {
			font-size: 14px;
			color: rgba(246, 249, 249, 1);
		}
		.val {
			color: #a5bcc4;
		}
		.unit {
			color: #d0f1fc;
		}
	}
}
</style>
